import React from 'react'
import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile'
import SearchHeader from '@/components/SearchHeader'
import './index.scss'
import Nav1 from '@/assets/images/nav-1.png'
import Nav2 from '@/assets/images/nav-2.png'
import Nav3 from '@/assets/images/nav-3.png'
import Nav4 from '@/assets/images/nav-4.png'
import { getCurrentCity } from '@/utils/index'
import { BASE_URL } from '@/utils/url'
import { getSwiperApi, getGroupApi, getNewsApi } from '@/api/home'

const navs = [
  {
    id: 1,
    img: Nav1,
    title: '整租',
    path: '/home/list'
  },
  {
    id: 2,
    img: Nav2,
    title: '合租',
    path: '/home/list'
  },
  {
    id: 3,
    img: Nav3,
    title: '地图找房',
    path: '/map'
  },
  {
    id: 4,
    img: Nav4,
    title: '去出租',
    path: '/rent/add'
  }
]
export default class Index extends React.Component {
  state = {
    swipers: [],
    isLoading: false,
    grops: [],
    news: [],
    cityName: '',
    isLoadCity: false
  }
  componentDidMount () {
    this.getPosition()
  }

  componentDidUpdate (prevProps, prevState) {
    if (prevState.cityName !== this.state.cityName) {
      this.getSwiper()
      this.getGroups()
      this.getNews()
    }
  }
  // 新的获取当前城市的方法
  async getPosition () {
    const { label, value } = await getCurrentCity()
    // console.log(label)
    // console.log(value)
    this.setState({
      cityName: label,
      areaId: value
    })
  }

  // 获取轮播图
  async getSwiper () {
    const { data: res } = await getSwiperApi()
    // console.log('轮播图', res)
    if (res.status !== 200) {
      return
    }
    this.setState(() => {
      return {
        swipers: res.body,
        isLoading: true
      }
    })
  }
  // 获取租房小组的数据
  async getGroups () {
    const res = await getGroupApi(this.state.areaId)
    // console.log('打印租房小组', res)
    this.setState(() => {
      return {
        grops: res.data.body
      }
    })
  }
  // 获取资讯的数据
  async getNews () {
    const res = await getNewsApi(this.state.areaId)
    // console.log('打印资讯', res)
    this.setState(() => {
      return {
        news: res.data.body
      }
    })
  }
  // 渲染轮播图结构
  renderSwipers () {
    return (
      <Carousel autoplay={true} infinite>
        {this.state.swipers.map(item => (
          <a
            key={item.id}
            href='http://itcast.cn'
            style={{
              display: 'inline-block',
              width: '100%',
              height: '212px'
            }}
          >
            <img
              src={BASE_URL + item.imgSrc}
              alt={item.alt}
              style={{ width: '100%', verticalAlign: 'top' }}
            />
          </a>
        ))}
      </Carousel>
    )
  }
  // 渲染导航菜单
  renderNavs () {
    return navs.map(item => (
      <Flex.Item
        key={item.id}
        onClick={() => {
          this.props.history.push(item.path)
        }}
      >
        <img src={item.img} alt='' />
        <h2>{item.title}</h2>
      </Flex.Item>
    ))
  }
  // 租房小组UI渲染
  renderGroups () {
    return (
      <div className='group'>
        <h3 className='group-title'>
          租房小组 <span className='more'>更多</span>
        </h3>
        {/* 宫格组件 */}
        <Grid
          data={this.state.grops}
          columnNum={2}
          square={false}
          hasLine={false}
          renderItem={item => (
            <Flex className='group-item' justify='around' key={item.id}>
              <div className='desc'>
                <p className='title'>{item.title}</p>
                <span className='info'>{item.desc}</span>
              </div>
              <img src={BASE_URL + item.imgSrc} alt='' />
            </Flex>
          )}
        />
      </div>
    )
  }
  // 资讯UI渲染
  renderNews () {
    return this.state.news.map(item => (
      <div className='news-item' key={item.id}>
        <div className='imgwrap'>
          <img className='img' src={BASE_URL + item.imgSrc} alt='' />
        </div>
        <Flex className='content' direction='column' justify='between'>
          <h3 className='title'>{item.title}</h3>
          <Flex className='info' justify='between'>
            <span>{item.from}</span>
            <span>{item.date}</span>
          </Flex>
        </Flex>
      </div>
    ))
  }
  // 搜索框的渲染
  renderSearch () {
    return <SearchHeader cityName={this.state.cityName} />
  }
  render () {
    return (
      <div>
        {/* 轮播图 */}
        <div className='swiper'>
          {this.state.isLoading ? this.renderSwipers() : ''}
          {this.renderSearch()}
        </div>
        {/* 导航菜单 */}
        <Flex className='nav'>{this.renderNavs()}</Flex>
        {/* 租房小组 */}
        {this.renderGroups()}
        {/* 最新资讯 */}
        <div className='news'>
          <h3 className='group-title'>最新资讯</h3>
          <WingBlank size='md'>{this.renderNews()}</WingBlank>
        </div>
      </div>
    )
  }
}
